<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
   - http://creativecommons.org/publicdomain/zero/1.0/ -->
<html>
<head>
  <title>Reference case for bug 1272983</title>
  <style>
    /* Set explicit font size so that em units are predictable: */
    body, button { font: 10px sans-serif; }

    /* Add outline to help visualize the padding outside of buttons: */
    button { outline: 1px solid black; }

    /* Set padding to 0 for all cases. In the first 3, that's how we expect
       the testcase to render; and in the 4th and 5th, our reference padding
       will be applied via a child div instead of via the pseudo-element. */
    button.mfi1::-moz-focus-inner,
    button.mfi2::-moz-focus-inner,
    button.mfi3::-moz-focus-inner,
    button.mfi4::-moz-focus-inner,
    button.mfi5::-moz-focus-inner { padding: 0; }

    /* Use an explicit div instead of pseudo-element, for reference case's
       version of padding values that we actually expect to take effect: */
    button.mfi4 > div { padding: 10px; }
    button.mfi5 > div { padding: 2em; }

    /* As above, set padding to 0 for all cases: */
    button.mfo1::-moz-focus-outer,
    button.mfo2::-moz-focus-outer,
    button.mfo3::-moz-focus-outer,
    button.mfo4::-moz-focus-outer,
    button.mfo5::-moz-focus-outer { padding: 0; }

    /* To make reference for -moz-focus-outer padding that we expect to
       take effect, we'll put the padding on a wrapper-div (and bump the
       button's outline to that div). */
    div.mfo4-wrapper { padding: 10px; }
    div.mfo5-wrapper { padding: 20px; /* = 2em * 10px/em */ }

    button.mfo4,
    button.mfo5 { outline: none; }
    div.mfo4-wrapper,
    div.mfo5-wrapper { display: inline-block; outline: 1px solid black; }
  </style>
</head>
<body>
  <button class="mfi1">mfi1</button>
  <button class="mfi2">mfi2</button>
  <button class="mfi3">mfi3</button>
  <br>
  <button class="mfi4"><div>mfi4</div></button>
  <button class="mfi5"><div>mfi5</div></button>
  <br>

  <button class="mfo1">mfo1</button>
  <button class="mfo2">mfo2</button>
  <button class="mfo3">mfo3</button>
  <br>
  <div class="mfo4-wrapper">
    <button class="mfo4">mfo4</button>
  </div>
  <div class="mfo5-wrapper">
    <button class="mfo5">mfo5</button>
  </div>
  <br>
</body>
</html>
